<template>
  <div>
    <top-nav/>
    <div class="game-list">
      <el-row :gutter="10">
        <el-col
          v-for="(item, index) in gameList"
          :key="index"
          :lg="4"
          :sm="8"
          :xs="12"
          class="list"
        >
          <div class="item" :style="{ 'background-color': item.bgColor() }" @click="toDetail(item)">{{ item.label }}</div>
        </el-col>
      </el-row>
    </div>
    <router-view/>
  </div>
</template>
<script>
function getInterVal(that) {
  let times
  times = setInterval(getBgColor, 5000)
  function getBgColor() {
    that.getColor = `#${Math.random().toString(16).substring(2,8)}87`
  }
  if (that.getColor)  clearInterval(times)
  return that.getColor
}
import topNav from '@/components/topNav'
export default {
  name: 'game-list',
  components: { topNav },
  data() {
    return {
      gameList: [
        {
          label:'双色球',
          path: '/game/pair',
          getColor: '',
          bgColor: function() {
            return getInterVal(this)
          } 
        },
        {
          label: '七星彩',
          path: '/game/seven',
          getColor: '',
          bgColor: function() {
            return getInterVal(this)
          }
        },
        {
          label: '计算',
          path: '/game/all',
          getColor: '',
          bgColor: function() {
            return getInterVal(this)
          }
        }
      ]
    }
  },
  methods: {
    toDetail(e) {
      this.$router.push({
        path: e.path,
        params: {
          id: '123'
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.game-list{
  width: 100%;
  max-width: 1200px;
  margin: 20px auto 20px;
  padding: 10px 10px 0;
  box-sizing: border-box;
  background: #fff;
  ::v-deep {
    .list{
      .item{
        margin-bottom: 10px;
        padding: 10px 15px;
        text-align: center;
        cursor: pointer;
        box-sizing: border-box;
        background: #FFF8E5;
      }
      &:nth-child(even) {
        .item{
          background: #EAFFFA;
        }
      }
    }
  }
}
</style>